import React, { Component } from 'react';
import {connect} from 'react-redux'
import { Table, Tooltip, Tag, Popconfirm, message, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';

// 引入自定义组件
import MasterUpdateTask from './components/MasterUpdateTask';

// 引入自定义操作
import { 
  GetMasterTasksSaga, 
  MasterChangeWorkerTaskSaga,
  DeleteMasterTaskSaga,
  DownLoadTaskEviSaga,
  ChangeMasterTasksDataActivate
} from '../../redux/actions/taskMasterManagePage'



class TaskMasterManagePage extends Component {

  // 用于记录每一行的信息
    constructor(props){
      super(props)
      this.state = {
        // 用来传递点击当行的数据
        data: {}
      }
    }

    componentDidMount(){
      console.log("请求后端获得数据")
      // 带email和username去后端验证
      const { email, username } = this.props.baseUserInfoState
      const obj = {email: email, username: username}
      // 携带用户email,username去请求后端
      this.props.GetMasterTasksSaga(obj)
    }

    // 用户任务状态的点击触发函数
    onConfirmRes = () => {
      const resData = this.state.data
      if (resData.task_res[0] == '2') {
        message.warning("现任务状态为：已完成，无法再切换")
      } else {
        this.props.MasterChangeWorkerTaskSaga(resData)
      }
    }

    // 雇主用户任务title点击触发的函数
    onConfirmTitle = () => {
      // console.log("雇主删除 is ", this.state.data)
      const resData = this.state.data
      if (resData.task_res[0] == '2') {
        message.warning("任务已完成，无法删除")
      } else if (resData.task_res[0] == '1') {
        message.warning("任务已进入开发，无法删除")
      } else {
        this.props.DeleteMasterTaskSaga(resData)
      }
    }

    render() {
      const columns = [
        {
          title: '任务标题',
          dataIndex: 'tasktitle',
          key: 'tasktitle',
          width: 150,
          render: (text, record, index) => (
            <Popconfirm
              title="删除该任务？"
              onConfirm={this.onConfirmTitle} // 点击确认的函数
              okText="删除"
              cancelText="取消"
            >
              <a
               onClick={()=>{
                // 点击向state传递数据
                this.setState({
                  data: {...record}
                })
              }}>{text}</a>
            </Popconfirm> 
            ),
        },
        {
          title: '任务赏金',
          dataIndex: 'bounty',
          key: 'bounty',
          width: 100,
        },
        {
          title: '任务截止时间',
          dataIndex: 'enddate',
          key: 'enddate',
        },
        {
            title: '任务审核状态',
            dataIndex: 'audit',
            key: 'audit',
            filters: [
                {
                  text: '审核不通过',
                  value: 2,
                },
                {
                  text: '审核通过',
                  value: 1,
                },
                {
                  text: '待审核',
                  value: 0,
                },
              ],
              // indexOf是强类型判断
            onFilter: (value, record) => record.audit.indexOf(value) === 0,
            render: (tags, record, index) => (
              <span>
                {tags.map(tag => {
                  let color = '';
                  let item_value = ''
                  if (tag == '0') {
                    color = 'orange';
                    item_value = '待审核'
                  } else if(tag == '1') {
                      color = 'green'
                      item_value = '审核通过'
                  } else if(tag == '2') {
                      color = 'volcano';
                      item_value = '不通过'
                  }
                  return (
                    <Tag color={color} key={tag}>
                      { item_value }
                    </Tag>
                  );
                })}
              </span>
            ),
        },
        {
          title: '任务类型',
          dataIndex: 'type_name',
          key: 'key',
          filters: [
            {
              text: '图片标注',
              value: '图片标注',
            },
            {
              text: '文本分类',
              value: '文本分类',
            },
            {
              text: '情感识别',
              value: '情感识别',
            },
            {
              text: '残缺检测',
              value: '残缺检测',
            },
          ],
          // indexOf是强类型判断
          onFilter: (value, record) => record.type_name.indexOf(value) === 0,

        },
        {
          title: '任务完成状态',
          key: 'task_res',
          dataIndex: 'task_res',
          filters: [
            {
              text: '已完成',
              value: 2,
            },
            {
              text: '开发中',
              value: 1,
            },
            {
              text: '未开始',
              value: 0,
            },
          ],
          // indexOf是强类型判断
          onFilter: (value, record) => record.task_res.indexOf(value) === 0,
          // render可以带入参数(当前字段的值，当前整行数据，行索引)
          render: (tags, record, index) => (
            <Popconfirm
              title="是否切换为< 已完成 >状态？一经切换无法撤回"
              onConfirm={this.onConfirmRes} // 点击确认的函数
              okText="确认切换"
              cancelText="不切换"
            >
              <span style={{"cursor": "pointer"}} onClick={()=>{
                // 点击向state传递数据
                this.setState({
                  data: {...record}
                })
              }}>
                {tags.map(tag => {
                  let color = 'green';
                  let item_value = '已完成'
                  if (tag == '0') {
                    color = 'volcano';
                    item_value = '未开始'
                  } else if(tag == '1') {
                      color = 'geekblue'
                      item_value = '开发中'
                  } else if(tag == '2') {
                      color = 'green';
                      item_value = '已完成'
                  }
                  return (
                    <Tag color={color} key={tag}>
                      { item_value }
                    </Tag>
                  );
                })}
              </span>
            </Popconfirm>
            ),
        },
        {
          title: '任务作证材料',
          key: 'task_evi',
          dataIndex: 'task_evi',
          render: (text, record, index)=>(
            // <a href={"http://localhost:5000/master_manage/download_task_evi/" + record.key + "/" + this.props.baseUserInfoState.email}>
              <Button 
                type="primary" 
                shape="round" 
                size='small'
                icon={<DownloadOutlined />} 
                disabled = {text ? false : true}
                onClick = {()=>{
                  const obj = {
                    id: record.key,
                    email: this.props.baseUserInfoState.email
                  }
                  this.props.DownLoadTaskEviSaga(obj)
                }}
              >
                下载资料
              </Button>
            // </a>
            )
        },
        {
          title: '联系方式',
          key: 'email',
          dataIndex: 'email',
        },
        {
          title: '任务描述',
          key: 'taskintro',
          dataIndex: 'taskintro',
          ellipsis: {
              showTitle: false,
          },
          render: taskintro => (
              <Tooltip placement='topLeft' title={taskintro}>
                  {taskintro}
              </Tooltip>
          )
        },
        {
          title: "编辑功能",
          key: "edit_feature",
          dataIndex: "feature",
          render: (text, record, index) => (
            <Button
              type="primary"
              size='small'
              shape="round"
              disabled = {record.audit[0] == 0 || record.audit[0] == 2 ? false : true}
              onClick={()=>{
                let typeid = 0
                if (record.type_name == '图片标注') {
                  typeid = 1
                } else if (record.type_name == '文本分类') {
                  typeid = 2
                } else if (record.type_name == '情感识别') {
                  typeid = 3
                } else if (record.type_name == '残缺检测') {
                  typeid = 4
                }
                const obj = {
                  activate: true,
                  id: record.key,
                  tasktitle: record.tasktitle,
                  taskintro: record.taskintro,
                  typeid: String(typeid),
                  bounty: record.bounty,
                  enddate: record.enddate,
                  email: this.props.baseUserInfoState.email,
                  username: this.props.baseUserInfoState.username
                }
                console.log("record is ", record)
                console.log("baseUserInfoState is ", this.props.baseUserInfoState)
                this.props.ChangeMasterTasksDataActivate({...obj})
              }}
            >
              修改
            </Button>
          )
        }
      ];
      const { task_data } = this.props.TaskMMPState
      return (
        <>
          <Table columns={columns} dataSource={task_data}  scroll={{ y: 557 }} />
          <MasterUpdateTask />
        </> 
      )
    }
}

export default connect(
    state => ({
      baseUserInfoState: state.PublicReducer.baseUserInfo,
      TaskWMPState: state.TaskWorkerManagePageReducer.tasks,
      TaskMMPState: state.TaskMasterManagePageReducer.tasks,
    }),
    {
      GetMasterTasksSaga,
      MasterChangeWorkerTaskSaga,
      DeleteMasterTaskSaga,
      DownLoadTaskEviSaga,
      ChangeMasterTasksDataActivate
    }
)(TaskMasterManagePage)